<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增产品类别')" />
    <th:block th:include="include :: datetimepicker-css" />
    <style>
        div .col-sm-8 span{
            color: darkgrey;
        }
    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-product-add">
<!--            <div class="form-group">
                <label class="col-sm-3 control-label is-required">资源目录：</label>
                <div class="col-sm-8" >
                    <input id="treeId" name="resourcesId" type="hidden" />
                    <input class="form-control" type="text" onclick="selectResourcesTree()" id="treeName" readonly="true" required>
                </div>
            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">产品名称：</label>
                <div class="col-sm-8">
                    <input name="productName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">产品类别：</label>
                <div class="col-sm-8">
                    <select name="productType" class="form-control m-b" th:with="type=${@dict.getType('product_type')}" required>
                        <option value="">---请选择---</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
<!--                    <input name="productType" class="form-control" type="text" required>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">发布单位：</label>
                <div class="col-sm-8">
                    <select name="productDepartment" class="form-control m-b" required>
                        <option value="">--请选择--</option>
                        <option th:each="dept:${deptList}" th:text="${dept.deptName}" th:value="${dept.departcode}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">预报类型：</label>
                <div class="col-sm-8">
                    <select name="forecastType" class="form-control m-b" required>
                        <option value="">--请选择--</option>
                        <option th:each="type:${forecastTypes}" th:text="${type.typeName}" th:value="${type.typeCode}"></option>
                    </select>
<!--                    <input name="forecastType" class="form-control" type="text" required>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">产品类型：</label>
                <div class="col-sm-8">
                    <select name="productItem" class="form-control m-b" required>
                        <option value="">---请选择---</option>
                        <option th:each="type:${productTypes}" th:text="${type.productName}" th:value="${type.productCode}"></option>
                    </select>
<!--                    <input name="productItem" class="form-control" type="text">-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">覆盖海区：</label>
                <div class="col-sm-8">
<!--
                    <select name="coverSeaArea" class="form-control m-b">
                        <option value="">-&#45;&#45;请选择-&#45;&#45;</option>
                        <option th:each="oceanArea:${oceanAreas}" th:text="${oceanArea.areaName}" th:value="${oceanArea.areaCode}"></option>
                    </select>
-->
                    <input name="coverSeaArea" hidden>
                    <input id="oceanName" class="form-control" type="text" onclick="oceanareapop()" required readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">预报时效：</label>
                <div class="col-sm-8">
                    <select name="forecastAging" class="form-control m-b" required>
                        <option value="">---请选择---</option>
                        <option th:each="aging:${agings}" th:text="${aging.name}" th:value="${aging.code}"></option>
                    </select>
<!--                    <input name="forecastAging" class="form-control" type="text" required>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label ">预报要素：</label>
                <div class="col-sm-8" th:required="true" id="element">
                        <input style="margin-left: 1%" name="forecastElement" type="radio" th:each="element:${elements}"
                               th:value="${element.englishAbbreviations}" th:text="${element.elementName}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">产品模式：</label>
                <div class="col-sm-8">
                    <input name="productMode" hidden>
                    <input id="modeName" class="form-control" type="text" onclick="modePop()" required readonly>
<!--                    <input name="productMode" class="form-control" type="text" required>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">时间格式：</label>
                <div class="col-sm-8">
                    <select id="timetype" class="form-control m-b" required>
                        <option value="YYYY">YYYY(年)</option>
                        <option value="YYYYMM">YYYYMM(年月)</option>
                        <option value="YYYYMMDD">YYYYMMDD(年月日)</option>
                        <option value="YYYYMMDDHH">YYYYMMDDHH(年月日时)</option>
                        <option value="YYYYMMDDHHMM">YYYYMMDDHHMM(年月日时分)</option>
                        <option value="YYYYMMDDHHMMSS">YYYYMMDDHHMMSS(年月日时分秒)</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">命名规则：</label>
                <div class="col-sm-8">
                    <input id="nameRule" name="nameRule" class="form-control" type="text" required disabled>
                    <div id="zdy"></div>
                </div>
            </div>
            <div class="form-group" style="display: none">
                <label class="col-sm-3 control-label ">是否只匹配前四位：</label>
                <div class="col-sm-8" th:required="true" id="isjc">
                        <input id="is" name="isjc" type="radio" value="0" th:text="是">
                        <input id="no" name="isjc" type="radio" value="1" th:text="否" checked>
                    <div id="ts"></div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">文件格式：</label>
                <div class="col-sm-8">
                    <input id="fileType" name="fileType" class="form-control" type="text" required>
                    <span class="nameRule">只有nc格式的文件会进行头文件识别和裁切</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">分辨率：</label>
                <div class="col-sm-8">
                    <input name="resolution" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label ">起报时间：</label>
                <div class="col-sm-8">
                    <select name="frequency" class="form-control m-b" >
                        <option value="">---请选择---</option>
                        <option th:each="frequency:${frequencies}" th:text="${frequency.name}" th:value="${frequency.code}"></option>
                    </select>
<!--                    <input name="frequency" class="form-control" type="text" required>-->
                    <span class="frequency">对应产品命名规则YYYYMMDDHH字段中的HH</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">时间间隔：</label>
                <div class="col-sm-8">
                    <select name="forecastInterval" class="form-control m-b">
                        <option value="">---请选择---</option>
                        <option th:each="interval:${forecastIntervals}" th:text="${interval.name}" th:value="${interval.code}"></option>
                    </select>
<!--                    <input name="forecastInterval" class="form-control" type="text">-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">文件大小：</label>
                <div class="col-sm-8">
                    <input name="fileSize" class="form-control" type="text" required placeholder="MB">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">上限阈值：</label>
                <div class="col-sm-8">
                    <input name="maxFileSize" class="form-control" type="text" placeholder="%(百分比)" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">下限阈值：</label>
                <div class="col-sm-8">
                    <input name="minFileSize" class="form-control" type="text" placeholder="%(百分比)" required>
                </div>
            </div>
            <!--<div class="form-group">
                <label class="col-sm-3 control-label">启用阈值：</label>
                <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                    <input name="isOpenThreshold" type="radio" th:each="dict:${type}"
                           th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="'1' eq ${dict.dictValue}">
                </div>
            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">启用阈值：</label>
                <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                    <input name="isOpenThreshold" type="radio" th:each="dict:${type}"
                           th:value="${dict.dictValue}" th:text="${dict.dictLabel}"  checked="1">
                </div>
            </div>
           <!-- <div class="form-group">
                <label class="col-sm-3 control-label">左下经度/纬度：</label>
                <div class="col-sm-4">
                    <input name="leftUpLongitude" class="form-control" type="text">
                </div>
                <div class="col-sm-4">
                    <input name="leftUpLatitude" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">右上经度/纬度：</label>
                <div class="col-sm-4">
                    <input name="rightDownLongitude" class="form-control" type="text">
                </div>
                <div class="col-sm-4">
                    <input name="rightDownLatitude" class="form-control" type="text">
                </div>
            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">自动发布：</label>
                <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                    <input name="isAuto" type="radio" th:each="dict:${type}"
                           th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="'1' eq ${dict.dictValue}">
                </div>
            </div>
           <!-- <div class="form-group">
                <label class="col-sm-3 control-label">是否可预览：</label>
                <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                    <input name="isPreview" type="radio" th:each="dict:${type}"
                           th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="'0' eq ${dict.dictValue}">
                </div>
            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">是否前端显示：</label>
                <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                    <input name="isOpen" type="radio" th:each="dict:${type}"
                           th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="'1' eq ${dict.dictValue}">
                </div>
            </div>
          <!--  <div class="form-group">
                <label class="col-sm-3 control-label">是否永久保存：</label>
                <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                    <input name="isForeverSave" type="radio" th:each="dict:${type}"
                           th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="'0' eq ${dict.dictValue}">
                </div>
            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">是否检查更新：</label>
                <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                    <input name="isJoinHistory" type="radio" th:each="dict:${type}"
                           th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="'0' eq ${dict.dictValue}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">检查更新天数：</label>
                <div class="col-sm-8">
                    <select name="notUpdateCheckDays" class="form-control m-b">
                        <option value="">---请选择---</option>
                        <option th:each="day:${historyDays}" th:text="${day.historyDays}" th:value="${day.historyCode}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">判断晚传时间设置：</label>
                <div class="col-sm-8">
                    <input name="wcsz" class="form-control" type="text" >
                    <span class="checkConfig">晚传设置：设置格式举例：0_18_0900 ，表示每天早9点（北京时）检查该产品起报时为前一日18时的文件。说明：第一字段的一位数为0或1，0表示要检查的文件起报时间在检查时间的前一日，1表示为同日；中间字段的两位数为文件起报时间（小时）；最后四位数表示在每天xx点xx分（北京时）进行检查。若有多个设置，请用英文逗号分隔。</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">归档超时提醒设置：</label>
                <div class="col-sm-8">
                    <input name="checkConfig" class="form-control" type="text">
                    <span class="checkConfig">归档检查时间设置：此处设置每日文件在云平台的归档检查时间，若对应文件在设置时间未成功归档，系统将向产品负责人发送Email及短信提醒。设置格式举例：0_18_0900 ，表示每天早9点（北京时）检查该产品起报时为前一日18时的文件。说明：第一字段的一位数为0或1，0表示要检查的文件起报时间在检查时间的前一日，1表示为同日；中间字段的两位数为文件起报时间（小时）；最后四位数表示在每天xx点xx分（北京时）进行检查。若有多个设置，请用英文逗号分隔。
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">晚传检查时间设置：</label>
                <div class="col-sm-8">
                    <select name="lateTransmission" class="form-control m-b">
                        <option value="">---请选择---</option>
                        <option th:each="time:${productLateTimes}" th:text="${time.lateName}" th:value="${time.lateCode}"></option>
                    </select>
<!--                    <input name="lateTransmission" class="form-control" type="text">-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">补传检查时间设置：</label>
                <div class="col-sm-8">
                    <select name="repairTransmission" class="form-control m-b">
                        <option value="">---请选择---</option>
                        <option th:each="time:${repairTimes}" th:text="${time.repairName}" th:value="${time.repairCode}"></option>
                    </select>
<!--                    <input name="repairTransmission" class="form-control" type="text">-->
                    <span class="repairTransmission">若产品文件在晚传检查时间仍未成功归档，则从归档检查时间开始经过此时间段后系统将进行补传检查。若文件在补传检查时间前上传并成功归档，则该文件上传状态会转为补传。
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">补传短信提醒日：</label>
                <div class="col-sm-8">
                    <select name="repairTipSmsDay" class="form-control m-b">
                        <option value="">---请选择---</option>
                        <option th:each="time:${repairTimes}" th:text="${time.repairCode}" th:value="${time.repairCode}"></option>
                    </select>
<!--                    <input name="repairTipSmsDay" class="form-control" type="text">-->
                    <span class="repairTipSmsDay">若产品文件在晚传检查时间仍未成功归档，将于该提醒日（归档检查时间后第x日）发送短信对负责人进行提醒，设置的提醒日不能大于补传检查时间
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否归档解压：</label>
                <div class="col-sm-8">
                    <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                        <input id="isUnzip" name="isUnzip" type="radio" th:each="dict:${type}"
                               th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="'0' eq ${dict.dictValue}">
                        <span class="repairTipSmsDay">
                            将压缩包解压后归档
                        </span>

                    </div>
<!--                    <input name="isUnzip" class="form-control" type="text">-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">短信提醒电话：</label>
                <div class="col-sm-8">
                    <input name="smsTipPhone" class="form-control"></input>
                    <span class="smsTipPhone">多个电话间用英文逗号分隔</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">提醒邮箱设定：</label>
                <div class="col-sm-8">
                    <input name="sendMail" class="form-control"></input>
                    <span class="sendMail">多个邮箱地址间用英文逗号分隔</span>
                </div>
            </div>
       <!--     <div class="form-group">
                <label class="col-sm-3 control-label">可预览/下载单位：</label>
                <div class="col-sm-8">
                    <input type="checkbox" id="allChecked">全选
                    <div>
                        <input name="departIds" type="checkbox" th:each="dept:${deptList}"
                            th:value="${dept.deptId}" th:text="${dept.deptName}">
                    </div>
                </div>
            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label ">产品简要介绍：</label>
                <div class="col-sm-8">
                    <textarea name="productDrief" class="form-control" style="height: 150px"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">排序：</label>
                <div class="col-sm-8">
                    <input name="sortOrder" class="form-control" type="text" value="0" required>
                    <span class="sortOrder">数字越大排的越前面,范围0-999</span>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />\
    <script th:src="@{/static/ocean/js/add.js}" type="text/javascript"></script>
    <script th:inline="javascript">
        var prefix = ctx + "product/product"
/*
        $("#form-product-add").validate({
            focusCleanup: true
        });
*/

        $("#allChecked").click(function () {   //全选框按钮点击事件
            var flg = this.checked;

            $("input[name=departIds]").each(function () {
                this.checked = flg;
            });
        });
        $(document).on("click","input[name=departIds]",function(){ //复选框点击事件
            //判断当前选择中的元素是否等于总复选框个数
            var flag = $("input[name=departIds]:checked").length==$("input[name=departIds]").length;
            $("#allChecked").prop("checked",flag);
        });
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-product-add').serialize());
            }
        }

        $("input[name='createDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='updateDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });


    </script>
</body>
</html>
